<template>
  <div class="wrap">
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          v-for="(item, index) in goodsData.categories"
          :key="index"
          :to="{ path: '/home/category' + (index + 1), query: { id: 123 } }"
        >
          <b>{{ item.name }}</b>
        </el-breadcrumb-item>
        <!-- <el-breadcrumb-item> {{ goodsData.categories[0].name }} </el-breadcrumb-item> -->
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="goods-info">
      <div class="goods-left">
        <div class="magnifier-left">
          <!--放大镜模块-->
          <div class="magnifier">
            <div
              class="img-box"
              @mousemove="move($event)"
              @mouseout="out"
              ref="previewBox"
            >
              <img :src="imgUrl" height="520" width="520" />
              <div class="hover-box" ref="hoverBox"></div>
            </div>
            <div class="zoom-box" v-show="zoomVisiable" ref="zoomBox">
              <img :src="imgUrl" ref="bigImg" />
            </div>
          </div>
          <!-- 放大镜右侧图列表 -->
          <div class="smallImg">
            <img
              :class="active == index ? 'borderGreen' : ''"
              @mouseenter="borderGreen(index)"
              :src="item"
              alt=""
              v-for="(item, index) in goodsData.mainPictures"
              :key="item"
            />
          </div>
        </div>
        <!-- 销售信息 -->
        <div class="sales">
          <div>
            <p>销量人气</p>
            <p>200+</p>
            <p>销量人气</p>
          </div>
          <div>
            <p>商品评价</p>
            <p>400+</p>
            <p>商品评价</p>
          </div>
          <div>
            <p>收藏人气</p>
            <p>600+</p>
            <p>收藏人气</p>
          </div>
          <div>
            <p>品牌信息</p>
            <p>苏宁电器</p>
            <p>品牌信息</p>
          </div>
        </div>
      </div>
      <div class="goods-right">
        <p class="name">{{ goodsData.name }}</p>
        <p class="desc">{{ goodsData.desc }}</p>
        <p class="price">
          <span class="new">￥{{ goodsData.price }}</span>
          <span class="old">￥{{ goodsData.oldPrice }}</span>
        </p>
        <div class="service">
          <div>
            促销
            <span>12月好物放送，App领券购买直降120元</span>
          </div>
          <div>
            配送
            <el-cascader
              size="small"
              :options="options"
              v-model="selectedOptions"
              @change="handleChange"
            >
            </el-cascader>
          </div>
          <div>
            服务
            <span
              >· 无忧退货 · 快速退款 · 免费包邮
              <span style="color: green; cursor: pointer">了解详情</span></span
            >
          </div>
        </div>

        <div class="sku" v-for="(item, index) in goodsData.specs" :key="index">
          <span class="title">{{ item.name }}</span>
          <div class="skuBox">
            <div
              v-for="(item2, index2) in item.values"
              :key="index2"
              @click="sku(item.name, index, index2)"
              :class="skuActive[item.name] == index2 ? 'active' : ''"
            >
              <img v-if="item2.picture" :src="item2.picture" alt="" />
              <span v-else> {{ item2.name }}</span>
            </div>
          </div>
        </div>

        <div class="numBox">
          <span>数量</span>
          <template>
            <el-input-number
              v-model="num"
              size="small"
              :min="1"
              :max="10"
              label="描述文字"
            >
            </el-input-number>
          </template>
        </div>
        <el-button class="addCar" type="primary" @click="addCar"
          >加入购物车</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { regionData } from "element-china-area-data";
export default {
  data() {
    return {
      id: this.$route.query.id,
      imgUrl: "",
      zoomVisiable: false,
      goodsData: {},
      // 选中展示图片
      active: 0,
      options: regionData,
      // 地址
      selectedOptions: [],
      // 规格选中绿色框
      skuActive: [],
      skuId: "",
      num: 1,
    };
  },
  async mounted() {
    // let res = await this.$detail.goods({
    //   id: "4000027",
    // });
    // 跳转来的id
    // console.log(JSON.parse(JSON.stringify(res.data.result)));

    let res2 = await this.$detail.goods({
      id: this.id,
    });
    // 跳转来的id
    // console.log(JSON.parse(JSON.stringify(res2.data.result)));

    this.goodsData = res2.data.result;
    this.imgUrl = this.goodsData.mainPictures[0];
  },
  methods: {
    addCar() {},
    sku(name, index, index2) {
      this.$set(this.skuActive, name, index2);

      let num = 1;
      if (this.skuActive.length == 1) {
        num = index2 + 1;
      } else {
        for (const key in this.skuActive) {
          let length = this.skuActive[key];
          num = num * length;
        }
      }
      console.log(num);

      // 设置skuid
      this.skuId = this.goodsData.skus[num].id;
      // console.log(this.skuId);
    },
    handleChange() {
      // console.log(this.selectedOptions);
    },
    // 放大镜切换图片
    borderGreen(index) {
      this.active = index;
      this.imgUrl = this.goodsData.mainPictures[index];
    },
    out() {
      this.zoomVisiable = false;
    },
    move(ev) {
      this.init();
      const scrollY =
        document.documentElement.scrollTop || document.body.scrollTop; // 垂直滚动条的位置
      let moveX = ev.clientX; // 鼠标距离屏幕距离
      let moveY = ev.clientY;
      let offsetLeft = this.oPreviewBox.offsetParent.offsetLeft; // 小盒子距离页面左边的距离
      let offsetTop = this.oPreviewBox.offsetParent.offsetTop; // 小盒子距离页面顶部的距离
      let left = moveX - offsetLeft - this.hoverWidth / 2; // 黄色区域距离小盒子左边的距离
      let top;
      if (scrollY > 0) {
        // 如果向上滚动要加上滚动距离,moveY只是鼠标相对屏幕的坐标位置
        top = moveY - offsetTop + scrollY - this.hoverHeight / 2;
      } else {
        top = moveY - offsetTop - this.hoverHeight / 2;
      }
      let maxWidth = this.pWidth - this.hoverWidth; // 小盒子宽-黄色区域宽
      let maxHeight = this.pHeight - this.hoverHeight; // 小盒子高-黄色区域高

      left = left < 0 ? 0 : left > maxWidth ? maxWidth : left; // 判断黄色区域是否超出小盒子左右，如果超出，左边left为0，右边为maxWidth
      top = top < 0 ? 0 : top > maxHeight ? maxHeight : top; // 判断黄色区域是否超出小盒子上下，如果超出，上边top为0，下边为maxHeight
      let percentX = left / maxWidth;
      let percentY = top / maxHeight;

      this.oHoverBox.style.left = left + "px"; // 黄色区域在小盒子里的实际位置
      this.oHoverBox.style.top = top + "px";
      this.oBigImg.style.left = percentX * (this.bWidth - this.imgWidth) + "px";
      this.oBigImg.style.top =
        percentY * (this.bHeight - this.imgHeight) + "px";
      this.$emit("move", ev);
      this.zoomVisiable = true;
    },
    init() {
      this.oHoverBox = this.$refs.hoverBox; // 小盒子中的黄色区域
      this.oPreviewBox = this.$refs.previewBox; // 小盒子
      this.oBigImg = this.$refs.bigImg; // 放大的图片
      this.imgBox = this.$refs.zoomBox; // 大盒子

      this.hoverWidth = this.oHoverBox.offsetWidth; // 黄色区域的宽高
      this.hoverHeight = this.oHoverBox.offsetHeight;
      this.pWidth = this.oPreviewBox.offsetWidth; // 小盒子宽高
      this.pHeight = this.oPreviewBox.offsetHeight;

      this.imgWidth = this.oBigImg.offsetWidth; // 大图片宽高
      this.imgHeight = this.oBigImg.offsetHeight;
      this.bWidth = this.imgBox.offsetWidth; // 大盒子宽高

      this.bHeight = this.imgBox.offsetHeight;
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  display: block;
  width: 100%;
  background: #f5f5f5;

  // 面包屑
  .breadcrumb {
    font-size: 20px;
    width: 1240px;
    margin: 0 auto;
    padding: 25px 10px;
  }

  // 商品信息
  .goods-info {
    width: 1240px;
    margin: 0 auto;
    background: #fff;
    display: flex;

    .goods-left {
      width: 580px;
      padding: 30px 50px;
      box-sizing: border-box;

      .magnifier-left {
        width: 580px;
        display: flex;

        .smallImg {
          display: flex;
          flex-direction: column;

          img {
            width: 68px;
            height: 68px;
            margin: 0 0 15px 12px;
          }

          // 绿色框
          .borderGreen {
            width: 64px;
            height: 64px;
            border: 2px solid green;
          }
        }
      }

      .sales {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        margin-bottom: 12px;

        div {
          width: 100px;
          border-right: 1px solid rgb(173, 173, 173);
          text-align: center;
        }

        div:last-child {
          border: 0;
        }

        p {
          margin-top: 10px;
        }

        p:nth-child(1) {
          color: #999;
        }

        p:nth-child(2) {
          color: #cf4444;
        }

        p:nth-child(3):hover {
          color: green;
          cursor: pointer;
        }
      }
    }

    .goods-right {
      width: 580px;
      padding: 30px;
      padding-left: 0;

      p {
        margin-bottom: 10px;
      }

      .name {
        font-size: 22px;
      }

      .desc {
        color: #999;
      }

      .price {
        .new {
          color: #cf4444;
          margin-right: 10px;
          font-size: 22px;
        }

        .old {
          color: #999;
          text-decoration: line-through;
          font-size: 16px;
        }
      }

      .service {
        background: #f5f5f5;
        width: 500px;
        padding: 20px 10px 0 10px;
        margin-top: 10px;
        color: #999;

        div {
          display: flex;
          align-items: center;
          padding-bottom: 20px;

          span {
            margin-left: 20px;
          }
        }

        .el-cascader {
          padding: 0;
          margin-left: 20px;
        }
      }

      .sku {
        display: flex;
        align-items: center;
        padding-left: 10px;
        padding-top: 20px;
        color: #999;

        .title {
          width: 50px;
          margin-right: 20px;
        }

        .skuBox {
          width: 560px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;

          div {
            margin: 0 10px 10px 0;
            cursor: pointer;
            border: 1px solid #e4e4e4;
          }

          img {
            width: 50px;
            height: 50px;
          }

          span {
            color: #000;
            display: inline-block;
            height: 30px;
            line-height: 28px;
            padding: 0 20px;
          }

          .active {
            border: 1px solid green;
          }
        }
      }

      .numBox {
        display: flex;

        span {
          color: #999;
          width: 50px;
          margin-right: 20px;
        }
      }

      .addCar {
        margin-top: 10px;
      }
    }
  }
}

// 放大镜
.magnifier {
  position: relative;

  .img-box {
    position: relative;
    width: 400px;
    height: 400px;
    margin-bottom: 10px;
    border: 1px solid #e9e9e9;
    background-size: cover;
    background-image: ("/static/default.png");

    img {
      width: 100%;
      height: 100%;
    }

    &:hover .hover-box {
      display: block;
    }

    .hover-box {
      width: 200px !important;
      height: 200px !important;
      position: absolute;
      display: none;
      left: 0;
      top: 0;
      width: 303px;
      height: 303px;
      border: 1px solid #545454;
      background: 50% top no-repeat #fede4f;
      opacity: 0.5;
      cursor: move;
      user-select: none;
    }
  }

  .zoom-box {
    z-index: 999;
    width: 400px;
    height: 400px;
    overflow: hidden;
    position: absolute;
    left: 412px;
    border: 1px solid #e4e4e4;
    top: 0;

    img {
      width: 800px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>